<div id="rl-sub-right">
	<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': messageFocused}">
		<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
			<nobr>
			<div class="messageButtons btn-toolbar">
				<div class="btn-group" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE/BUTTON_CLOSE'">
					<a class="btn single btn-dark-disabled-border buttonClose" data-bind="command: closeMessage">
						<i class="icon-remove"></i>
					</a>
				</div>
				<div class="btn-group">&nbsp;</div>
				<div class="btn-group" data-tooltip-join="top" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
					<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
						<i class="icon-pencil icon-white"></i>
					</a>
				</div>
				<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
				<div class="btn-group" data-bind="visible: !usePreviewPane()">
					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
						<i class="icon-archive"></i>
					</a>
					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
						<i class="icon-angry-smiley"></i>
					</a>
					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'MESSAGE/BUTTON_NOT_SPAM'">
						<i class="icon-happy-smiley"></i>
					</a>
					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
						<i class="icon-trash"></i>
					</a>
				</div>
				<div class="btn-group">&nbsp;</div>
				<div class="btn-group hide-on-mobile" data-bind="visible: !usePreviewPane()">
					<a class="btn btn-thin first btn-dark-disabled-border buttonUp" data-bind="command: goUpCommand">
						<i class="icon-left-middle"></i>
					</a>
					<a class="btn btn-thin last btn-dark-disabled-border buttonDown" data-bind="command: goDownCommand">
						<i class="icon-right-middle"></i>
					</a>
				</div>
			</div>
			</nobr>
		</div>
		<div class="b-content b-message-view-wrapper thm-message-view-background-color">
			<div style="height: 100%">
				<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages()">
					<span data-bind="text: printableCheckedMessageCount()"></span>
					<i class="icon-mail"></i>
				</div>

				<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages()">
					<span class="text" data-bind="text: messageError()"></span>
				</div>

				<div data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()" style="height: 100%">

					<div class="b-message-view-desc" data-bind="visible: !logoIframe">
						<span class="i18n" data-bind="visible: !logoImg" data-i18n="MESSAGE/MESSAGE_VIEW_DESC"></span>
						<div class="logoPlace" data-bind="visible: logoImg, if: logoImg">
							<img style="height: 99%" data-bind="attr: { 'src': logoImg }" />
						</div>
					</div>

					<div class="b-message-view-iframe" data-bind="visible: logoIframe, if: logoIframe" style="position: relative; height: 100%">
						<iframe src="javascript:1;" tabindex="-1" frameborder="0"
							style="border: none; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;"
							data-bind="attr: {'src': logoIframe}"></iframe>
						<div class="b-message-view-iframe-backdrop"></div>
					</div>

				</div>

				<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message">
					<nobr>
						<div class="btn-group pull-right" style="margin-right: -8px;">
							<div class="btn-group pull-right" data-bind="registrateBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
								<a class="btn btn-thin-2 btn-transparent last btn-dark-disabled-border dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="bottom" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE', css: {'first': !allowComposer}">
										<span data-bind="visible: !allowComposer" class="icon-ellipsis-alt"></span>
										<span data-bind="visible: allowComposer" class="caret"></span>
								</a>
								<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-view-dropdown-id">
									<div data-bind="visible: allowComposer && !isDraftFolder()">
										<li class="e-item" role="presentation" data-bind="visible: 'reply' !== lastReplyAction()">
											<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
												<i class="icon-reply"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_REPLY"></span>
											</a>
										</li>
										<li class="e-item" role="presentation" data-bind="visible: 'replyall' !== lastReplyAction()">
											<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand">
												<i class="icon-reply-all"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
											</a>
										</li>
										<li class="e-item" role="presentation"
											data-bind="visible: 'forward' !== lastReplyAction()">
											<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand">
												<i class="icon-forward"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_FORWARD"></span>
											</a>
										</li>
										<li class="e-item" role="presentation">
											<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
												<i class="icon-pencil"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
											</a>
										</li>
										<li class="e-item" role="presentation">
											<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
												<i class="icon-forward"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
											</a>
										</li>
									</div>
									<div data-bind="visible: allowMessageListActions && usePreviewPane()">
										<li class="divider" role="presentation" data-bind="visible: allowComposer && !isDraftFolder()"></li>
										<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
												<i class="icon-archive"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_ARCHIVE"></span>
											</a>
										</li>
										<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
												<i class="icon-angry-smiley"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_SPAM"></span>
											</a>
										</li>
										<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: notSpamCommand">
												<i class="icon-happy-smiley"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_NOT_SPAM"></span>
											</a>
										</li>
										<li class="e-item" role="presentation">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
												<i class="icon-trash"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_DELETE"></span>
											</a>
										</li>
									</div>
									<div data-bind="visible: allowMessageActions">
										<li class="divider" role="presentation"
											data-bind="visible: (allowComposer && !isDraftFolder()) || (allowMessageListActions && usePreviewPane())"></li>
										<li class="e-item" role="presentation">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
												<i class="icon-print"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/MENU_PRINT"></span>
											</a>
										</li>
										<li class="e-item" role="presentation">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
												<i class="icon-popup"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
											</a>
										</li>
										<li class="divider" role="presentation"></li>
										<li class="e-item" role="presentation">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()">
												<i class="icon-file-code"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
											</a>
										</li>
										<li class="e-item" role="presentation">
											<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewDownloadLink()">
												<i class="icon-download"></i>
												&nbsp;&nbsp;
												<span class="i18n" data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
											</a>
										</li>
									</div>
								</ul>
							</div>
							<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReply pull-right" data-tooltip-join="bottom"
								data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
								<i class="icon-reply"></i>
							</a>
							<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReplyAll pull-right" data-tooltip-join="bottom"
								data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
								<i class="icon-reply-all"></i>
							</a>
							<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonForward pull-right" data-tooltip-join="bottom"
								data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
								<i class="icon-forward"></i>
							</a>
						</div>

						<div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder()" style="margin-right: 5px">
							<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
								<i class="icon-pencil icon-white"></i>
							</a>
						</div>

					</nobr>
				</div>

				<div data-bind="visible: message">
					<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
						<div>
							<img class="fromPic" data-bind="visible: viewUserPicVisible, attr: {'src': viewUserPic() }">
							<div style="overflow: hidden;">
								<button class="close" data-bind="command: closeMessage" style="margin-top: -2px;">&times;</button>
								<div class="subjectParent" data-bind="event: { 'dblclick': toggleFullScreen }">
									<span class="flagParent">
										<i class="icon-star-empty flagOff" data-bind="css: {'icon-star flagOn': viewIsFlagged, 'icon-star-empty flagOff': !viewIsFlagged()}"></i>
									</span>
									<b style="color: red; margin-right: 5px" data-bind="visible: viewIsImportant">!</b>
									<span class="subject" data-bind="text: viewSubject, title: viewSubject"></span>
									<span class="i18n emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT"></span>
								</div>
								<div class="senderParent">
									<div class="g-ui-user-select-none" style="float: left; cursor: pointer; margin-left: 1px;" data-bind="click: function() { showFullInfo(!showFullInfo()); }">
										<i class="icon-right-dir" data-bind="css: showFullInfo() ? 'icon-down-dir' : 'icon-right-dir'"></i>
									</div>
									<div class="informationShort" data-bind="event: { 'dblclick': toggleFullScreen }">
										<span data-bind="visible: !isDraftOrSentFolder()">
											<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
											&nbsp;
											<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle" />
										</span>
										<span data-bind="visible: isDraftOrSentFolder()">
											<span class="i18n uiLabel labelTo" data-i18n="MESSAGE/LABEL_TO"></span>:
											<span class="to" data-bind="html: viewToShort, title: viewTo"></span>
										</span>
										<span data-bind="visible: 0 < viewTimeStamp()">
											(<span class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></span>)
										</span>
									</div>
									<div class="clearfix"></div>
								</div>
							</div>
							<div class="informationFull" data-bind="visible: showFullInfo()">
								<table>
									<tr data-bind="visible: '' !== viewFrom()">
										<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_FROM"></span></td>
										<td>
											<span class="pull-right size" data-bind="text: viewSize"></span>
											<span class="from uiLabelValue" data-bind="text: viewFrom, title: viewFrom"></span>
									</div>
										</td>
									</tr>
									<tr data-bind="visible: '' !== viewTo()">
										<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_TO"></span></td>
										<td><span class="to uiLabelValue" data-bind="text: viewTo, title: viewTo"></span></td>
									</tr>
									<tr data-bind="visible: '' !== viewCc()">
										<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_CC"></span></td>
										<td><span class="cc uiLabelValue" data-bind="text: viewCc, title: viewCc"></span></td>
									</tr>
									<tr data-bind="visible: '' !== viewBcc()">
										<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_BCC"></span></td>
										<td><span class="bcc uiLabelValue" data-bind="text: viewBcc, title: viewBcc"></span></td>
									</tr>
									<tr data-bind="visible: '' !== viewReplyTo()">
										<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_REPLY_TO"></span></td>
										<td><span class="replyTo uiLabelValue" data-bind="text: viewReplyTo, title: viewReplyTo"></span></td>
									</tr>
									<tr data-bind="visible: 0 < viewTimeStamp()">
										<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_DATE"></span></td>
										<td>
											<span class="date uiLabelValue" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></span>
											&nbsp;
											(<span class="date uiLabelValue" data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></span>)
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="messageItem fixIndex" data-bind="css: viewLineAsCss(), nano: true, scrollerShadows: true, attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
						<div class="content g-scrollbox" tabindex="0" data-scroller-shadows-content data-bind="hasfocus: messageDomFocused, css: { 'focused': messageDomFocused },
							style: {'background-color': messageLoadingThrottle() ? '' : bodyBackgroundColor()}">

							<div class="content-wrapper">

								<div>
									<span class="buttonUp" data-bind="click: scrollMessageToTop">
										<i class="icon-up"></i>
									</span>
									<span class="buttonFull" data-bind="click: fullScreen">
										<i class="icon-arrows-out"></i>
									</span>
									<span class="buttonUnFull" data-bind="click: unFullScreen">
										<i class="icon-arrows-in"></i>
									</span>

									<div class="line-loading e-strip-animation" data-bind="visible: messageLoadingThrottle()"></div>

									<div class="loading g-ui-min-height-300" data-bind="visible: messageLoadingThrottle()">
										<span class="i18n text" data-i18n="MESSAGE/MESSAGE_LOADING"></span><span class="textLoadingAnimationD1">.</span><span class="textLoadingAnimationD2">.</span><span class="textLoadingAnimationD3">.</span>
									</div>
								</div>

								<div class="g-ui-min-height-300 content-content" data-bind="visible: !messageLoadingThrottle()">
									<div class="bodySubHeader">
										<div class="showImages" data-bind="visible: message() && message().hasImages(), click: function() { showImages(message()); }">
											<i class="icon-image"></i>
											&nbsp;&nbsp;
											<span class="i18n text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
										</div>
										<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: function() { readReceipt(message()); }">
											<i class="icon-mail"></i>
											&nbsp;&nbsp;
											<span class="i18n text" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></span>
										</div>
										<div class="attachmentsPlace" data-bind="visible: message() && message().hasVisibleAttachments(),
											css: {'selection-mode' : showAttachmnetControls, 'unselectedAttachmentsError': highlightUnselectedAttachments}">
											<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
												<li class="attachmentItem clearfix" draggable="true" data-tooltip-join="top"
														data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
													<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
														<div class="hidePreview">
															<div class="iconMain">
																<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
																<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText()"></i>
															</div>
														</div>
														<div class="showPreview">
															<a data-bind="click: $root.attachmentPreview, css: {'attachmentImagePreview': isImage(), 'visible': !isLinked}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
																<div class="iconMain">
																	<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
																	<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText()"></i>
																</div>
																<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
																<div class="iconPreview">
																	<i class="attachmentIcon icon-eye show-hover"></i>
																</div>
															</a>
														</div>
														<div class="showPreplay">
															<div class="iconMain">
																<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
															</div>
															<div class="iconPreview">
																<i class="attachmentIcon icon-play show-hover"></i>
															</div>
														</div>
													</div>
													<div class="attachmentNameParent">
														<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
															<span class="attachmentName" data-bind="text: fileName"></span>&nbsp;
														</div>
														<div>
															<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
														</div>
													</div>
													<div class="checkedParent">
														<i class="checkboxAttachment icon-checkbox-unchecked"
															data-bind="css: checked() ? 'checkboxMessage icon-checkbox-checked' : 'checkboxMessage icon-checkbox-unchecked',
															click: function () { checked(!checked()); return false }"></i>
													</div>
												</li>
											</ul>
											<i class="icon-cog controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true) }"></i>
										</div>

										<div class="attachmentsControls"
											data-bind="visible: showAttachmnetControls() && message() && message().hasVisibleAttachments()">

											<span data-bind="visible: downloadAsZipAllowed">
												<i class="icon-remove iconcolor-red" data-bind="visible: downloadAsZipError"></i>
												<i class="icon-file-zip" data-bind="visible: !downloadAsZipError(),
													css: {'icon-file-zip': !downloadAsZipLoading(), 'icon-spinner animated': downloadAsZipLoading()}"></i>
												&nbsp;&nbsp;
												<span class="g-ui-link" data-bind="click: downloadAsZip">
													<span class="i18n" data-i18n="MESSAGE/LINK_DOWNLOAD_AS_ZIP"></span>
												</span>
											</span>

											<span data-bind="visible: saveToOwnCloudAllowed">
												&nbsp;&nbsp;&nbsp;&nbsp;
												<i class="icon-remove iconcolor-red" data-bind="visible: saveToOwnCloudError"></i>
												<i class="icon-ok iconcolor-green" data-bind="visible: saveToOwnCloudSuccess"></i>
												<i class="icon-cloud-up" data-bind="visible: !saveToOwnCloudSuccess() && !saveToOwnCloudError(),
													css: {'icon-cloud-up': !saveToOwnCloudLoading(), 'icon-spinner animated': saveToOwnCloudLoading()}"></i>
												&nbsp;&nbsp;
												<span class="g-ui-link" data-bind="click: saveToOwnCloud">
													<span class="i18n" data-i18n="MESSAGE/LINK_SAVE_TO_OWNCLOUD"></span>
												</span>
											</span>

											<span data-bind="visible: saveToDropboxAllowed">
												&nbsp;&nbsp;&nbsp;&nbsp;
												<i class="icon-remove iconcolor-red" data-bind="visible: saveToDropboxError"></i>
												<i class="icon-ok iconcolor-green" data-bind="visible: saveToDropboxSuccess"></i>
												<i class="icon-dropbox" data-bind="visible: !saveToDropboxSuccess() && !saveToDropboxError(),
													css: {'icon-dropbox': !saveToDropboxLoading(), 'icon-spinner animated': saveToDropboxLoading()}"></i>
												&nbsp;&nbsp;
												<span class="g-ui-link" data-bind="click: saveToDropbox">
													<span class="i18n" data-i18n="MESSAGE/LINK_SAVE_TO_DROPBOX"></span>
												</span>
											</span>

											<button type="button" class="close" style="margin-right: 5px;"
												data-bind="click: function () { showAttachmnetControls(false); }">×</button>
										</div>
									</div>

									<div class="bodyText g-ui-min-height-300 rl-mv-root"
										data-bind="initDom: messagesBodiesDom"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
